﻿<div class="view">
    <div class="container">
        <header>
            <h3>{{title}} Customer</h3>
        </header>
        <form name="editForm" novalidate>
            <div>
                <div class="row">
                    <div class="span12">
                        <h4>{{ customer.firstName + ' ' + customer.lastName }} (<a style="font-size:12pt" href="#/customerorders/{{customer.id}}">View Orders</a>)</h4>
                        <br />
                    </div>
                </div>
                <div class="row">
                    <div class="span2">
                        First Name:
                    </div>
                    <div class="span10">
                        <input type="text" name="firstName" data-ng-model="customer.firstName" required />
                        <span class="errorMessage" ng-show="editForm.firstName.$dirty && editForm.firstName.$invalid">
                            First name is required
                        </span>
                    </div>
                </div>
                <div class="row">
                    <div class="span2">
                        Last Name:
                    </div>
                    <div class="span10">
                        <input type="text" data-ng-model="customer.lastName" required />
                        <span class="errorMessage" ng-show="editForm.lastName.$dirty && editForm.lastName.$invalid">
                            Last name is required
                        </span>
                    </div>
                </div>
                <div class="row">
                    <div class="span2">
                        Gender:
                    </div>
                    <div class="span10">
                        <label class="radio">
                            <input type="radio" name="gender" value="Male" 
                                data-ng-checked="customer.gender == 'Male'" 
                                data-ng-model="customer.gender" />
                            Male
                        </label>
                        <label class="radio">
                            <input type="radio" name="gender" value="Female" 
                                data-ng-checked="customer.gender == 'Female'" 
                                data-ng-model="customer.gender" />
                            Female
                            <br />
                        </label>
                    </div>
                </div>
                <div class="row">
                    <div class="span2">
                        Email:
                    </div>
                    <div class="span10">
                        <!-- type="email" causing a problem with Breeze so using regex -->
                        <input type="text" name="email"
                            data-ng-model="customer.email" 
                            data-wc-unique="{key: customer.id, property: 'email'}"
                            required /> 
                        <span class="errorMessage" ng-show="editForm.email.$dirty && editForm.email.$error.unique">
                            Email already in use
                        </span>
                    </div>
                </div>
                <div class="row">
                    <div class="span2">
                        Address:
                    </div>
                    <div class="span10">
                        <input type="text" name="address" data-ng-model="customer.address" required />
                        <span class="errorMessage" ng-show="editForm.address.$dirty && editForm.address.$invalid">
                            Address is required
                        </span>                    
                    </div>
                </div>
                <div class="row">
                    <div class="span2">
                        City:
                    </div>
                    <div class="span10">
                        <input type="text" name="city" data-ng-model="customer.city" required />
                        <span class="errorMessage" ng-show="editForm.city.$dirty && editForm.city.$invalid">
                            City is required
                        </span>  
                    </div>
                </div>
                <div class="row">
                    <div class="span2">
                        State:
                    </div>
                    <div class="span10">
                        <select name="state" required
                            data-ng-model="customer.stateId" 
                            data-ng-options="state.id as state.name for state in states">
                            <option value=""></option>
                        </select>
                        <span class="errorMessage" ng-show="editForm.state.$dirty && editForm.state.$invalid">
                            2 character state is required
                        </span>  
                    </div>
                </div>
                <div class="row">
                    <div class="span2">
                        Zip:
                    </div>
                    <div class="span10">
                        <input type="number" name="zip" data-ng-model="customer.zip" required />
                        <span class="errorMessage" ng-show="editForm.zip.$dirty && editForm.zip.$invalid">
                            Zip is required
                        </span>  
                    </div>
                </div>
                <div class="row">
                    <div class="span12">
                        <button type="submit" class="btn btn-primary" data-ng-click="saveCustomer()" ng-disabled="editForm.$invalid">{{buttonText}}</button>
                        &nbsp;&nbsp;
                        <button class="btn btn-danger" data-ng-if="customer.id > 0" data-ng-click="deleteCustomer()">Delete</button>
                    </div>
                </div>
                <div class="row">
                    <br />
                    <div class="span10 label label-success show-hide-animation" data-ng-show="updateStatus">
                        <i class="icon-thumbs-up icon-white"></i>&nbsp;&nbsp;Customer updated!
                    </div>
                    <div class="span10 label label-important show-hide-animation" data-ng-show="errorMessage">
                        <i class="icon-thumbs-down icon-white"></i>&nbsp;&nbsp;Error: {{ errorMessage }}
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
